<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
  export default {
    name: 'BarChartScroll',
    props: ['data'],
    data() {
      return {
      }
    },
    mounted() {
      this.drawChart()
    },
    watch: {
      'data.data': function(val) {
        this.drawChart()
      },
      deep: true
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(this.$el)
        // 绘制图表
        let xAxisData = this.data.data.map((item) => {
          return item.date
        })
        let dataValue = this.data.data.map((item) => {
          return item.value
        })
        let dataValue1 = this.data.data.map((item) => {
          return item.value1
        })
        let dataLine = this.data.data.map((item) => {
          return item.value2
        })
        if (xAxisData.length > 10) {
          this.myChart.setOption({
            title: {
              text: '单位: ' + this.data.unit,
              top: '0',
              right: '0',
              textStyle: {
                color: '#929292',
                fontWeight: 'normal',
                fontSize: '12'
              },
            },
            grid: {
              left: '0',
              right: '0',
              top:'30px',
              bottom: '0',
              containLabel: true
            },
            tooltip: {
              show: true,
              trigger: 'axis',
              position: function(point, params, dom, rect, size) {
                dom.style.transform = "translateZ(0)"
              },
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              data: xAxisData,
              axisLabel: {
                interval: 0,
                show: true,
                formatter: value => {
                  return value.split("").join("\n");
                },
                textStyle: {
                  fontSize: 12,
                  color: '#A3A3A3',
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#e7dfd4',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#e7e7e7',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#999',
                }
              },
              splitLine:{
                show:false,
              },
            }],
            dataZoom: [
              {
                type: "inside",
                show: true,
                start: 0,
                end: 60,
                zoomLock: true,
                filterMode: 'empty'
              }
            ],
            series: [
              {
                name: this.data.lengend[0],
                type: 'bar',
                barWidth: '8px',
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#FF3737'
                  }, {
                    offset: 1,
                    color: '#FFADAD'
                  }]),
                  barBorderRadius: [6, 6, 0, 0],
                },
                data: dataValue,
              },
              {
                name: this.data.lengend[1],
                type: 'bar',
                barWidth: '8px',
                barGap: "-100%",
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#C6E5FF'
                  }, {
                    offset: 1,
                    color: '#56A8EE'
                  }]),
                  barBorderRadius: [0, 0, 6, 6],
                },
                data: dataValue1
              },
              {
                name: this.data.lengend[2],
                smooth: true,
                type: 'line',
                itemStyle: {
                  normal: {
                    color: '#ff8200',
                    lineStyle: { // 系列级个性化折线样式
                      width: 1,
                      type: 'solid',
                      color: "#ff8200"
                    }
                  },
                }, //线条样式
                data: dataLine
              }
            ]
          });
        } else {
          this.myChart.setOption({
            title: {
              text: '单位: ' + this.data.unit,
              top: '0',
              right: '0',
              textStyle: {
                color: '#929292',
                fontWeight: 'normal',
                fontSize: '12'
              },
            },
            grid: {
              left: '0',
              right: '0',
              top:'30px',
              bottom: '0',
              containLabel: true
            },
            tooltip: {
              show: true,
              trigger: 'axis',
              extraCssText: 'z-index: 2',
              position: function(point, params, dom, rect, size) {
                dom.style.transform = "translateZ(0)"
              },
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              data: xAxisData,
              axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#A3A3A3',
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#e7dfd4',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#e7e7e7',
                  width: 1,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#999',
                }
              },
              splitLine:{
                show:false,
              },
            }],
            series: [
              {
                name: this.data.lengend[0],
                type: 'bar',
                barWidth: '8px',
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#FF3737'
                  }, {
                    offset: 1,
                    color: '#FFADAD'
                  }]),
                  barBorderRadius: [6, 6, 0, 0],
                },
                data: dataValue,
              },
              {
                name: this.data.lengend[1],
                type: 'bar',
                barWidth: '8px',
                barGap: "-100%",
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#C6E5FF'
                  }, {
                    offset: 1,
                    color: '#56A8EE'
                  }]),
                  barBorderRadius: [0, 0, 6, 6],
                },
                data: dataValue1
              },
              {
                name: this.data.lengend[2],
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 4,
                lineStyle:{
                  color: '#ff8200'
                },
                itemStyle:{
                  color: '#ff8200'
                },
                data: dataLine
              }
            ]
          });
        }
        this.myChart.resize()
      }
    },
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
